<template>
	<view class="inhospital-box dawn-shadow">
		<view v-if="inHospital.ZYH" class=" tn-margin-top-sm">
			<!-- 标签内容 -->
			<view class="">
				<view class="">
					<view class="list-head tn-flex tn-flex-direction-row tn-flex-col-center tn-flex-row-between">
						<view>
							<text class="tn-color-black">住院号：</text>
							<text class="tn-color-dawn tn-text-lg tn-text-bold">{{ inHospital.ZYH  || '' }}</text>
						</view>
						<view>
							<view class="justify-content-item ">
								<tn-tag backgroundColor="tn-main-gradient-dawn" fontColor="#FFFFFF" shape="circleLeft"
									width="auto">
									<text>{{ inHospital.CYSJ}}</text>
								</tn-tag>
							</view>
						</view>
					</view>
					<view class="list-content tn-flex tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="tn-flex tn-flex-nowrap  tn-flex-col-center tn-flex-row-left">
							<view v-if="inHospital.pictures && inHospital.pictures.length > 0">
								<image mode="aspectFill" class="list-content-image" :src="inHospital.pictures[0]">
							</view>
							<view class="">
								<view>
									<text class="tn-color-black">姓名：</text>
									<text class="tn-color-black tn-text-lg tn-text-bold">{{inHospital.XM || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-black">性别：</text>
									<text class="tn-color-dawn tn-text-bold">{{ inHospital.XB  || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-black">年龄：</text>
									<text class="tn-color-dawn tn-text-bold">{{ inHospital.NL  || '' }}</text>
								</view>
								<view class="tn-margin-top-xs">
									<text class="tn-color-black">科室：</text>
									<text class="tn-text-bold">{{inHospital.ZYKS || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-black">床号：</text>
									<text class="tn-color-dawn tn-text-bold">{{ inHospital.CDH  || '' }}</text>
								</view>
								<view class="tn-margin-top-xs">
									<text class="tn-color-black">医生：</text>
									<text class="tn-text-bold">{{inHospital.ZZYS || '' }}</text>
									<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
									<text class="tn-color-black">护士：</text>
									<text class="tn-color-dawn tn-text-bold">{{ inHospital.ZRHS  || '' }}</text>
								</view>
								<view class="tn-margin-top-xs">
									<text class="tn-color-black">诊断信息：</text>
									<block v-for="(item,index) in zdList" :key="index">
										<text class="dawn-text-sm tn-color-gray">入院诊断：{{ item.RYZD  || '' }}</text>
										<text class="dawn-text-sm tn-color-gray">出院诊断：{{ item.CYZD  || '' }}</text>
									</block>
								</view>
							</view>
						</view>
					</view>
					<view class="dawn-line tn-margin-top-sm"></view>
					<view class=" tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-between">
						<view class="justify-content-item tn-text-df">
							<text class="tn-icon-time-fill tn-color-black"></text>
							<text class="tn-color-black">{{ inHospital.RYSJ  || '' }}</text>
						</view>
						<view
							class="tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-right op-box">
							<tn-button @click="navDteail(inHospital)" size="sm"
								class="tn-shadow-blur dawn-btn-sm dawn-btn-sm__info">
								<text class="">未结费用</text>
							</tn-button>
							<tn-button @click="navDteail(inHospital)" size="sm"
								class="tn-shadow-blur dawn-btn-sm dawn-btn-sm__success">
								<text class="">已结费用</text>
							</tn-button>
						</view>
					</view>
				</view>
			</view>

		</view>


		<tn-popup v-model="show" mode="bottom" length="50%" :borderRadius="borderRadius">
			<view class="content">
				<view class="patient-head">
					<view class="list-icon-text">
						<view class="list__left">
							<view class="list__left__icon tn-icon-team-fill"></view>
							<view class="list__left__text">就诊人档案</view>
							<!-- <tn-button @click="addPatient" class="dawn-btn-sm dawn-btn-sm__main">
								<text class="tn-icon-add-square-fill tn-padding-right-ss"></text>
								<text class="">新增</text>
							</tn-button> -->
							<tn-button @click="getPatient" class="dawn-btn-xs dawn-btn-xs__info">
								<text class="tn-icon-refresh-square tn-padding-right-ss"></text>
								<text>刷新</text>
							</tn-button>
						</view>
						<view class="list__right">
							<tn-button @click=" show = false" class="dawn-btn-sm dawn-btn-sm__defult">
								<text class="tn-icon-close-fill">关闭</text>
							</tn-button>
						</view>
					</view>
				</view>
				<!-- <scroll-view scroll-y="true"> -->
				<view style="padding-top: 50px;padding-bottom: 150px">
					<block v-for="(item,index) in patientList" :key="index">
						<tn-list-cell>
							<view class="list-icon-text" @click="chooseItem(item)">
								<view class="list__left">
									<view style="width: 60px;">
										<text class="tn-text-bold dawn-text-md">{{ item.name }}</text>
									</view>
									<view>
										<text class="tn-color-gray tn-padding-left-xs tn-padding-right-xs">|</text>
										<text class="">{{ item.patientSex || '' }}</text>
									</view>
									<view class="tn-margin-left-sm tn-text-df">
										<text
											class="tn-icon-image-text-fill tn-margin-right-ss">{{ item.patientId }}</text>
									</view>
								</view>
								<view class="list__right">
									<!-- <tn-button class="dawn-btn-op"> -->
									<text v-if="item.id === patientInfo.id"
										class="tn-icon-success-square-fill dawn-color tn-text-lg"></text>
									<text v-else class="tn-icon-cursor-fill dawn-color-dark tn-text-lg"></text>

									<!-- </tn-button> -->
								</view>
							</view>
						</tn-list-cell>
					</block>
				</view>
				<!-- </scroll-view> -->

				<!-- 悬浮按钮-->
				<view class="tn-flex tn-footerfixed2"
					style="padding-bottom: 15px;background-color: white;box-shadow: none;">
					<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
						<tn-button @click="addPatient" class="dawn-btn-lg dawn-btn-lg__main">
							<text class="tn-icon-add-square-fill tn-padding-right-xs"></text>
							<text>新增就诊人</text>
						</tn-button>
					</view>
				</view>
			</view>
		</tn-popup>


	</view>

</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import eHealth from "@/libs/eHealth.js";
	import * as api from '@/api/api.js';
	import * as PatientApi from '@/api/hospital/patient.js';
	import * as UserPatient from '@/libs/userPatient.js';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	import {
		add
	} from '../../utils/util';
	const app = getApp();
	export default {
		name: 'patient_box',
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo', 'patientInfo', 'patientList']),
		components: {},
		props: {
			borderRadius: {
				type: [Number, String],
				default: 40
			},
			// 距离右边的距离
			right: {
				type: [Number, String],
				default: 30
			},
			zIndex: {
				type: [Number, String],
				default: 3000
			},
			// 首页地址
			indexPath: {
				type: String,
				default: '/main/index/index?init=no'
			},
			// 住院信息
			inHospital: {
				type: Array,
				default: function() {
					return {};
				}
			},
			// 是否查询
			search: {
				type: Boolean,
				default: false
			},
			// 是否需要验证
			verify: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				show: false,
				showCode: false,
				verifyOrderId: null
			}
		},
		async created() {
			await this.$onLaunched
			console.info("inhospital-box created")
		},
		async mounted() {
			await this.$onLaunched
			console.info("inhospital-box mounted");
		},
		methods: {
			navLink(url) {
				uni.navigateTo({
					url: url
				});
			},
			chooseClick() {
				this.show = true;
			},
			chooseItem(item) {
				if (item.id && this.verify) {
					console.log(item)
					if (item.verify !== undefined && item.verify !== 1) {
						let urlData = location.pathname;
						this.toVerify(item, urlData);
					}
					return;
				}

				this.patient = item;
				this.$store.commit("UPDATE_PATIENTINFO", item);
				this.show = false;
				if (this.search) {
					this.$emit('search');
				}
				this.updateClinicNo(item);
			},

			getCode(item) {
				this.showCode = true;
			},
			async getPatient() {
				let res = await UserPatient.getUserPatient(this.userInfo.openid);
				if (res.code === 0) {
					this.$util.Tips({
						title: '刷新档案成功'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tn-popup__close--top-right {
		color: #FFFFFF !important;
	}

	.inhospital-box {
		padding: 10px;
		border-radius: $dawn-border-radius;
		position: relative;
		// z-index: 1;
		background-color: #fff !important;
		color: #000;
	}

	.patient-head {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10000;
		background-color: white;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		padding: 10rpx 0rpx;
	}

	.qrcode {
		width: 300rpx;
		height: 300rpx;
		border-radius: $dawn-border-radius;
	}


	::v-deep .tn-list-cell {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: #080808;
		font-size: $dawn-font-size-base;
		padding: 10rpx 15rpx !important;
	}

	.list-icon-text,
	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-image-text {
		.list {
			&__left {
				&__image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}

	.list {
		font-size: $dawn-font-size-base;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 8rpx;
				font-size: $dawn-font-size-lg + 2;
				font-weight: bolder;
				color: $dawn-theme-color-dark;
			}

			&__text {
				font-size: $dawn-font-size-lg;
				color: $dawn-theme-color-dark;
				font-weight: bolder;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>